<template>
  <div class="hello">
    <div class="swiper-container swiper_detail">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for='(v,i) in 5' :key='i'>
          <img :class='v' :src="items.img" alt />
        </div>

      </div>
    </div>
  </div>
</template>

<script>
// import "../../public/js/swiper.min";
export default {
  props:{
    items:{}
  },
  data() {
    return {
      // msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    var mySwiper = window.Swiper;
    new mySwiper(".swiper_detail", {
      effect: "coverflow",
      // slidesPerView: 3,
      // centeredSlides: true,
      loop: true,
      //设置自动循环播放
      autoplay: true,
      // effect: 'coverflow',
      slidesPerView: 2,
      centeredSlides: true,
      initialSlide: 2,
      coverflowEffect: {
        rotate: 30,
        stretch: 10,
        depth: 60,
        modifier: 2,
        slideShadows: true
      }
    });
    // console.log(mySwiper);
  }
};
</script>


<style scoped>
/* @import "../../public/css/swiper.min.css"; */
.hello {
  /* margin-top:100px; */
  /* background-color: #dedede; */
  display: flex;
  /* padding-top: 100px; */
}
body {
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 600px;
  /* margin: 20px auto; */
}
/* .swiper-slide{
  width:80%;
  height:100%;
} */
.swiper-slide > img {
  width: 100%;
  height: 100%;
}
</style>